
<!Doctype html>
<html>
    <head>
        <title>百度以下，你就知道</title>
	<link rel="icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
    </head>


<style>

/* 找到 脖子处 , 输入style ,  回车*/
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
}

.logo {
    margin-bottom: 30px;
}

.logo img {
    width: 300px;
}

.search-container {
    display: flex;
    align-items: center;
    border: 2px solid #4E6EF2;
    border-radius: 24px;
    padding: 5px 15px;
    width: 700px;
    height: 70px;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 8px;
}

.search-button {
    background-color: #4E6EF2;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 16px;
    cursor: pointer;
}

.result-container {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.result-image {
    max-width: 500px;
    max-height: 500px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

</style>


    <body>
        <div class="logo">
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo">
        </div>
    <div class="search-container">
        <input type="text" class="search-input" placeholder="特朗普联大演讲炮轰全球">
        <button class="search-button">百度一下</button>
    </div>
    <div class="result-container" id="result-container">无</div>
    </body>
</html>


<script>
// 找到代码的最后一行空白行 , 输入script , 回车

// 获取搜索按钮和结果容器元素
const searchButton = document.querySelector('.search-button');
const resultContainer = document.getElementById('result-container');

// 为搜索按钮添加点击事件监听器
searchButton.addEventListener('click', function () {
    // 显示加载中效果
    resultContainer.innerHTML = '加载中...';
    
    // 创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest();

    // 设置请求地址
    const apiUrl = 'https://api.thecatapi.com/v1/images/search?size=full';

    // 配置请求
    xhr.open('GET', apiUrl, true);

    // 设置响应处理函数
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                // 解析JSON响应
                const response = JSON.parse(xhr.responseText);

                // 清空结果容器并添加图片
                resultContainer.innerHTML = `<img src="${response[0].url}" alt="喵喵酱" class="result-image">`;

            }
        }
    }

    // 发送请求
    xhr.send();
});
</script>


